Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel,
{
    lines: false,
    borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
    cls: 'x-column-tree',
    collapsible: false,
    onRender: function()
    {
        Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
        this.headers = this.body.createChild(
        {
            cls: 'x-tree-headers'
        }, this.innerCt.dom);

        var cols = this.columns, c;
        var totalWidth = 0;

        for (var i = 0, len = cols.length; i < len; i++)
        {
            c = cols[i];
            totalWidth += c.width;
            this.headers.createChild(
            {
                cls: 'x-tree-hd ' + (c.cls ? c.cls + '-hd' : ''),
                cn:
                {
                    cls: 'x-tree-hd-text',
                    html: c.header
                },
                style: 'width:' + (c.width - this.borderWidth) + 'px;'
            });
        }

        this.headers.createChild(
        {
            cls: 'x-clear'
        });

        // prevent floats from wrapping when clipped
        //this.headers.setWidth(totalWidth);
        this.innerCt.setWidth(totalWidth);
      },
      initComponent: function()
      {
          Ext.tree.ColumnTree.superclass.initComponent.apply(this, arguments);
          this.addEvents('beforecelledit');
          for (var i = 0; i < this.columns.length; i++)
          {
              var col = this.columns[i];

              if (col.editorField)
              {
                  var editor = new Ext.tree.ColumnTreeEditor(this, col.dataIndex, col.editorField);
                  this.editor = editor;
              }
          }
      }
});

Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI,
{
    focus: Ext.emptyFn, // prevent odd scrolling behavior
    renderElements: function(n, a, targetNode, bulkRender)
    {
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

        var t = n.getOwnerTree();
        var cols = t.columns;
        var bw = t.borderWidth;
        var c = cols[0];

        n.cols = new Array();
        n.renderers = new Array();

        var text = n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]);
        n.cols[cols[0].dataIndex] = text;

        var buf =
        [
            '<li class="x-tree-node" unselectable="on"><div ext:tree-node-id="',
            n.id,
            '" class="x-tree-node-el x-tree-node-leaf ',
            a.cls,
            '" unselectable="on">',
            '<div class="x-tree-col" style="width:',
            c.width - bw,
            'px;" unselectable="on">',
            '<span class="x-tree-node-indent" unselectable="on">',
            this.indentMarkup,
            "</span>",
            '<img src="',
            this.emptyIcon,
            '" class="x-tree-ec-icon x-tree-elbow" unselectable="on">',
            '<img src="',
            a.icon || this.emptyIcon,
            '" class="x-tree-node-icon',
            (a.icon ? ' x-tree-node-inline-icon' : ''),
            (a.iconCls ? ' ' + a.iconCls : ''),
            '" unselectable="on">',
            '<a hidefocus="on" class="x-tree-node-anchor" href="',
            a.href ? a.href : '#',
            '" tabIndex="1" ',
            a.hrefTarget ? ' target="' + a.hrefTarget + '"' : '',
            ' unselectable="on">',
            '<span unselectable="on">',
            text,
            '</span></a>',
            '</div>'
        ];

        for (var i = 1, len = cols.length; i < len; i++)
        {
            c = cols[i];
            var text = (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]);
            n.cols[c.dataIndex] = text;
            n.renderers[c.dataIndex] = { renderer: ( c.renderer ? c.renderer : false ) }
            buf.push('<div class="x-tree-col ', (c.cls ? c.cls : ''), '" style="width:', c.width - bw,
                     'px;" unselectable="on">', '<div class="x-tree-col-text x-tree-col-', c.dataIndex, '" unselectable="on">', text, '</div>', '</div>');
        }
        buf.push('<div class="x-clear" unselectable="on"></div></div>',
                 '<ul class="x-tree-node-ct" style="display:none;" unselectable="on"></ul>', '</li>');

        if (bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl())
        {
            this.wrap = Ext.DomHelper.insertHtml('beforeBegin', n.nextSibling.ui.getEl(), buf.join(''));
        }
        else
        {
            this.wrap = Ext.DomHelper.insertHtml('beforeEnd', targetNode, buf.join(''));
        }

        this.elNode = this.wrap.childNodes[0];
        this.ctNode = this.wrap.childNodes[1];
        var cs = this.elNode.firstChild.childNodes;
        this.indentNode = cs[0];
        this.ecNode = cs[1];
        this.iconNode = cs[2];
        this.anchor = cs[3];
        this.textNode = cs[3].firstChild;
    }
});